<template>
	<div class="gridBox">
		<el-card>
			<div class="headerTitle">
				<div>总体接入情况</div>
				<div>
					<el-date-picker
						v-model="pickerTime"
						end-placeholder="结束时间"
						range-separator="至"
						start-placeholder="开始时间"
						type="datetimerange"/>
				</div>
			</div>
			<div class="charts">
				<div class="total">
					<div>当前在线数<span>260</span></div>
					<div>当前启用数<span>260</span></div>
					<div>当前总数<span>250</span></div>
				</div>
				<div id="ztMain" :style="{ width: '500px', height: '400px' }"></div>
			</div>
		</el-card>
		<el-card>
			<div class="headerTitle" style="padding:17.5px 20px">
				<div>关键设备维护信息</div>
			</div>
			<div class="tableBar">
				<el-table
					:cell-style="{ textAlign: 'center' }"
					:data="equipData"
					:header-cell-style="{ textAlign: 'center' }"
					size="small"
					border
					style="width: 100%">
					<el-table-column label="序号" type="index"></el-table-column>
					<el-table-column label="设备名称" prop="equipName"></el-table-column>
					<el-table-column label="检验（校准）日期" prop="ruleDate" width="180"></el-table-column>
					<el-table-column label="检查人" prop="inspector"></el-table-column>
					<el-table-column label="检查人手机" prop="inspectorIphone"></el-table-column>
					<el-table-column label="设备说明书" prop="instructions"></el-table-column>
				</el-table>
			</div>
		</el-card>
	</div>
</template>

<script setup>

import * as echarts from "echarts";
import {ref, onMounted, reactive} from "vue";

let pickerTime = ref('');
let equipData = reactive([
	{
		equipName: '',
		ruleDate: '',
		inspector: '',
		inspectorIphone: '',
		instructions: '',
	},
	{
		equipName: '',
		ruleDate: '',
		inspector: '',
		inspectorIphone: '',
		instructions: '',
	},
])

onMounted(() => {
	let chartDom = document.getElementById('ztMain');
	let myChart = echarts.init(chartDom);
	let option = {
		tooltip: {
			trigger: 'axis'
		},
		xAxis: {
			type: 'category',
			data: ['4/20', '4/21', '4/22', '4/23', '4/24', '4/25', '4/26', '4/27', '昨天', '今天'],
			axisLine:{
				show:true,
				lineStyle:{
					color:'#6e7079'
				}
			}
		},
		yAxis: {
			type: 'value',
			min:0,
			max:30,
			interval:5,
			axisLine:{
				show:true,
				lineStyle:{
					color:'#6e7079'
				}
			}
		},
		legend: {
			orient: 'horizontal',
			itemHeight: 1,
			x: 'right',
			data: ['当前在线数', '当前启用数', '当前总数'],
			icon: "rect"
		},
		series: [
			{
				name: '当前在线数',
				data: [10, 20, 24, 28, 15, 17, 20, 30, 13, 21],
				type: 'line',
				color: '#dddddd'
			},
			{
				name: '当前启用数',
				data: [25, 25, 25, 25, 25, 25, 25, 25, 25, 25,25],
				type: 'line',
				symbol: "none",
				color: '#d90909'
			},
			{
				name: '当前总数',
				data: [23, 23, 23, 23, 23, 23, 23, 23, 23, 23,23],
				type: 'line',
				symbol: "none",
				color: '#fed24b'
			}
		],
	};
	myChart.setOption(option);
})


</script>

<style lang="less" scoped>
.gridBox {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr 1fr;
	row-gap: 20px;
	column-gap: 20px;
}

:deep(.el-date-editor) {
	width: 210px;
}

:deep(.el-card__body) {
	padding: 0 !important;
}

.charts {
	margin-top: 20px;
	display: flex;
	align-items: flex-end;
	justify-content: space-around;

	.total {
		margin-bottom: 50px;

		div {
			margin-top: 30px;
			font-size: 14px;
			justify-content: space-between;
			display: flex;
			width: 125px;
		}

		span {
			font-size: 16px;
			color: #3f80cc;

		}
	}
}

.tableBar {
	margin-top: 20px;
	padding: 0 10px;

	:deep(.el-table) {
		thead {
			color: #4d4d4d;
		}
	}
}
</style>
